<template>
  <div class="refine_lawequip">
    <h2 class="titleblue">执法装备</h2>
    <div class="contant">
      <el-tabs v-model="plantabs" type="card" @tab-click="handleClick">
        <el-tab-pane label="CCTV系统" name="1">
          <data-table :head="thead1" :data="tableData1" :page='currentPage1' @callback="manipulate1"
                      :actions="['edit','view','del']"
                      class="intendance-table"></data-table>
          <i class="el-icon-circle-plus-outline add-icon" @click="addCCTV"></i>
        </el-tab-pane>
        <el-tab-pane label="VTS分中心" name="2">
          <data-table :head="thead2" :data="tableData2" :page='currentPage2' @callback="manipulate2"
                      :actions="['edit','view','del']"
                      class="intendance-table"></data-table>
          <i class="el-icon-circle-plus-outline add-icon" @click="addVSTC"></i>
        </el-tab-pane>
        <el-tab-pane label="VTS雷达站" name="3">
          <data-table :head="thead3" :data="tableData3" :page='currentPage3' @callback="manipulate3"
                      :actions="['edit','view','del']"
                      class="intendance-table"></data-table>
          <i class="el-icon-circle-plus-outline add-icon" @click="addVTS"></i>
        </el-tab-pane>
      </el-tabs>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage1" layout="total,prev, pager, next, jumper"
                       :total="total1" background v-if="plantabs=='1'">
        </el-pagination>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange1"
                       :current-page.sync="currentPage2" layout="total,prev, pager, next, jumper"
                       :total="total2" background v-if="plantabs=='2'">
        </el-pagination>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange2"
                       :current-page.sync="currentPage3" layout="total,prev, pager, next, jumper"
                       :total="total3" background v-if="plantabs=='3'">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="" :visible.sync="cctvdialog" width="80%" append-to-body @close="cctvClose">
        <span>
            <h2 class="titleblue">{{cctvtitle}}</h2>
            <div class="contant type-div">
                <el-form :model="cctvForm" ref="cctvForm" label-width="130px">
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="中文名称" :rules="[{ required: true, message: '中文名称不能为空'}]">
                                    <el-input v-model="cctvForm.cnName" :readonly='readread'
                                              class="select-width-220"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="英文名称">
                                    <el-input v-model="cctvForm.enName" :readonly='readread'
                                              class="select-width-220"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="所属海事机构" :rules="[{ required: true, message: '所属海事机构不能为空'}]">
                                    <el-input v-model="cctvForm.orgName" :readonly='readread'
                                              class="select-width-220"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="位置">
                                    <el-input v-model="cctvForm.position" :readonly='readread'
                                              class="select-width-220"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="经度" :rules="[{ required: true, message: '坐标不能为空'}]">
                                  <Location :type="longTime" :data.sync="cctvForm.longitude" :readonly='readread'
                                            :update="cctvdialog"></Location>
                                  <!--<el-input v-model="cctvForm.zb" :readonly='readread'-->
                                  <!--class="select-width-220"></el-input>-->
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="纬度" :rules="[{ required: true, message: '坐标不能为空'}]">
                                  <Location :type="latTime" :data.sync="cctvForm.latitude" :readonly='readread'
                                            :update="cctvdialog"></Location>
                                  <!--<el-input v-model="cctvForm.zb" :readonly='readread'-->
                                  <!--class="select-width-220"></el-input>-->
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="探头类型">
                                    <el-input v-model="cctvForm.probeType" :readonly='readread'
                                              class="select-width-220"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="是否有云台">
                                    <el-radio v-model="cctvForm.cloudTerrace" :disabled='readread' style='width:50px'
                                              :label="1">是</el-radio>
                                    <el-radio v-model="cctvForm.cloudTerrace" :disabled='readread' style='width:50px'
                                              :label="0">否</el-radio>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="探头数量">
                                    <el-input v-model="cctvForm.probeNum" :readonly='readread'
                                              class="select-width-220"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="业主单位名称">
                                    <el-input v-model="cctvForm.ownerUnitName" :readonly='readread'
                                              class="select-width-220"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="联系人">
                                    <el-input v-model="cctvForm.contact" :readonly='readread'
                                              class="select-width-220"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content">
                                <el-form-item label="联系电话">
                                    <el-input v-model="cctvForm.contactPhone" :readonly='readread'
                                              class="select-width-220"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <div class="grid-content">
                                <el-form-item label="备注">
                                    <el-input type="textarea" :readonly='readread' v-model="cctvForm.remark"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </span>
      <el-row :gutter="24" class="footerbtn" v-if="cctvbtn">
        <el-button class="sure" @click="surebtn">确认</el-button>
        <el-button class="cancel" @click="cctvClose">取消</el-button>
      </el-row>
    </el-dialog>

    <el-dialog title="" :visible.sync="vtsdialog" width="80%" append-to-body>
            <span>
                <h2 class="titleblue">{{vtstitle}}</h2>
                <div class="contant type-div">
                    <el-form :model="vtsForm" ref="vtsForm" label-width="130px">
                        <el-row>
                            <el-col :span="12">
                                <div class="grid-content">
                                    <el-form-item label="中文名称" :rules="[{ required: true, message: '名称不能为空'}]">
                                        <el-input v-model="vtsForm.name" :readonly='readread'
                                                  class="select-width-220"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content">
                                    <el-form-item label="位置" :rules="[{ required: true, message: '位置不能为空'}]">
                                        <el-input v-model="vtsForm.position" :readonly='readread'
                                                  class="select-width-220"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content">
                                    <el-form-item label="建成时间">
                                        <el-input v-model="vtsForm.createFinishTime" :readonly='readread'
                                                  class="select-width-220"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content">
                                    <el-form-item label="纬度">
                                        <Location :type="latTime" :data.sync="vtsForm.latitude" :readonly='readread'
                                                  :update="vtsdialog"></Location>
                                      <!--<el-input v-model="vtsForm.latitude" :readonly='readread'-->
                                      <!--class="select-width-220"></el-input>-->
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content">
                                    <el-form-item label="经度">
                                        <Location :type="longTime" :data.sync="vtsForm.longitude" :readonly='readread'
                                                  :update="vtsdialog"></Location>
                                      <!--<el-input v-model="vtsForm.longitude" :readonly='readread'-->
                                      <!--class="select-width-220"></el-input>-->
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12" v-if="vtsType">
                                    <div class="grid-content">
                                        <el-form-item label="站址高度(米)">
                                            <el-input v-model="vtsForm.altitude" :readonly='readread'
                                                      class="select-width-220"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                        </el-row>
                    </el-form>
                </div>
            </span>
      <el-row :gutter="24" class="footerbtn" v-if="vtsbtn">
        <el-button class="sure" @click="vtssurebtn">确认</el-button>
        <el-button class="cancel" @click="vtsdialog=false">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import Location from '@/components/common/Location.vue'
  import cctvSiteService from '@/services/CctvSiteService.js'
  import vtsRadarStService from '@/services/VtsRadarStService.js'
  import vtsSubCenterService from '@/services/VtsSubCenterService.js'

  export default {
    components: {
      'data-table': DataTable,
      Location
    },
    data: function () {
      return {
        latTime: 'latTime',
        longTime: 'longTime',
        plantabs: '1',
        thead1: [
          {name: '中文名称', prop: 'cnName'},
          {name: '所属海事机构', prop: 'orgName'},
          {name: '位置', prop: 'position'},
          {name: '业主单位名称', prop: 'ownerUnitName'},
          {name: '联系人', prop: 'contact'},
          {name: '联系电话', prop: 'contactPhone'},
        ],
        thead2: [
          {name: 'VTS中心名称', prop: 'name'},
          {name: '位置', prop: 'position'},
          {name: '建成时间', prop: 'createFinishTime'},
          {name: '纬度', prop: 'latitude'},
          {name: '经度', prop: 'longitude'},

        ],
        thead3: [
          {name: '雷达站名称', prop: 'name'},
          {name: '位置', prop: 'position'},
          {name: '建成时间', prop: 'createFinishTime'},
          {name: '纬度', prop: 'latitude'},
          {name: '经度', prop: 'longitude'},
          {name: '站址高度(米)', prop: 'altitude'},
        ],
        tableData1: [],
        tableData2: [],
        tableData3: [],
        currentPage: 1,
        currentPage1: 1,
        currentPage3: 1,
        currentPage2: 1,
        total1: 0,
        total2: 0,
        total3: 0,
        ddid: '',
        cctvdialog: false,
        cctvtitle: '添加CCTV系统',
        vtstitle: '添加VTS分中心',
        cctvForm: {
          cloudTerrace: 1, // 是否有云台 ,
          cnName: '', // 中文名称 ,
          contact: '', // 联系人 ,
          contactPhone: '', // 联系电话 ,
          enName: '', // 英文名称 ,
          latitude: '', // 纬度 ,
          longitude: '', // 经度 ,
          orgName: '',
          ownerUnitName: '', // 业主单位名称 ,
          position: '', // 位置 ,
          probeNum: '', // 探头数量 ,
          probeType: '', // 探头类型 ,
          remark: '', // 备注 ,
        },
        vtsForm: {
          altitude: '',
          createFinishTime: '',
          latitude: '',
          longitude: '',
          name: '',
          position: ''
        },
        vtsdialog: false,
        readread: true,
        cctvbtn: true,
        vtsbtn: true,
        vtsType: false,
        detailId: '',
        createTime: ''
      }
    },
    created () {
      this.getData(0)
    },
    methods: {
      cctvClose () {
        this.cctvdialog = false
        this.cctvForm.latitude = ''
        this.cctvForm.longitude = ''
      },
      showDetail (param) {
        var data = param.data
        if (this.cctvdialog) {
          for (let key in data) {
            //
            if (key == 'id') {
              this.detailId = data[key]
            } else if (key == 'createTime') {
              this.createTime = data[key]
            } else if (key == 'cloudTerrace') {
              if (data[key] == true) {
                this.cctvForm[key] = 1
              } else if (data[key] == false) {
                this.cctvForm[key] = 0
              }
            } else {
              this.cctvForm[key] = data[key]
            }
          }
        } else {
          for (let key in data) {
            //
            if (key == 'id') {
              this.detailId = data[key]
            } else if (key == 'createTime') {
              this.createTime = data[key]
            } else {
              this.vtsForm[key] = data[key]
            }
          }
        }
      },
      //CCTV系统
      manipulate1 (param) {
        if (param.action == 'edit') {
          this.cctvtitle = '编辑CCTV系统'
          this.cctvdialog = true
          this.readread = false
          this.cctvbtn = true
          this.showDetail(param)
          // this.adddialog = true
          // this.$router.push({name: 'CreateBerth', params: param})
          // this.detail = 'edit'
        }
        if (param.action == 'view') {
          this.cctvtitle = '查看CCTV系统'
          this.cctvdialog = true
          this.readread = true
          this.cctvbtn = false
          this.showDetail(param)
          // this.adddialog = true
          // this.$router.push({name: 'CreateBerth', params: param})
          // this.detail = 'look'
        }
        if (param.action == 'del') {
          cctvSiteService.delete(param.data.id).then(res => {
            this.getData(0)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }
      },
      //VTS分中心
      manipulate2 (param) {
        if (param.action == 'edit') {
          this.vtstitle = '编辑VTS分中心'
          this.vtsdialog = true
          this.readread = false
          this.showDetail(param)
          this.vtsbtn = true
          this.vtsType = false
        } else if (param.action == 'view') {
          this.vtstitle = '查看VTS分中心'
          this.vtsdialog = true
          this.readread = true
          this.showDetail(param)
          this.vtsbtn = false
          this.vtsType = false
        } else if (param.action == 'del') {
          vtsSubCenterService.delete(param.data.id).then(res => {
            this.getData(0)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }
      },
      //VTS雷达站
      manipulate3 (param) {
        if (param.action == 'edit') {
          this.vtsType = true
          this.vtstitle = '编辑VTS雷达站'
          this.vtsdialog = true
          this.readread = false
          this.showDetail(param)
          this.vtsbtn = true
        } else if (param.action == 'view') {
          this.vtstitle = '查看VTS雷达站'
          this.vtsdialog = true
          this.readread = true
          this.showDetail(param)
          this.vtsbtn = false
          this.vtsType = true
        } else if (param.action == 'del') {
          vtsRadarStService.delete(param.data.id).then(res => {
              this.getData(0)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
          })
          // cctvSiteService.delete(param.data.id).then(res => {
          //   this.getData(0)
          //   this.$message({
          //     type: 'success',
          //     message: '删除成功!'
          //   })
          // })
        }
      },
      handleClick () {
        this.getData(0)
      },
      handleSizeChange (val) {
        if (this.plantabs == '1') {
          this.currentPage1 = val
        } else if (this.plantabs == '2') {
          this.currentPage2 = val
        } else if (this.plantabs == '3') {
          this.currentPage3 = val
        }
        this.getData(val -1)
      },
      handleCurrentChange (val) {
        this.currentPage1 = val
        this.getData(val -1)
      },
      handleCurrentChange1 (val) {
        this.currentPage2 = val
        this.getData(val -1)
      },
      handleCurrentChange2 (val) {
        this.currentPage3 = val
        this.getData(val -1)
      },
      //CCTV
      addCCTV () {
        this.cctvdialog = true
        this.ddid = ''
        this.cctvtitle = '添加CCTV系统'
        this.readread = false
        this.cctvbtn = true
        this.cctvForm = {}
      },
      //VTS分中心
      addVSTC () {
        this.vtsdialog = true
        this.ddid = ''
        this.vtstitle = '添加VTS分中心'
        this.readread = false
        this.vtsbtn = true
        this.vtsType = false
        this.vtsForm = {}
      },
      //VTSl
      addVTS () {
        this.vtsdialog = true
        this.ddid = ''
        this.vtstitle = '添加VTS雷达站'
        this.readread = false
        this.vtsbtn = true
        this.vtsType = true
        this.vtsForm = {}
      },
      surebtn () {
        if (!this.cctvForm.cnName) {
          this.$alert('请输入中文名称')
          return false
        }
        if (!this.cctvForm.orgName) {
          this.$alert('请输入所属海事机构')
          return false
        }
        if (!this.cctvForm.latitude) {
          this.$alert('请输入经度')
          return false
        }
        if (!this.cctvForm.longitude) {
          this.$alert('请输入纬度')
          return false
        }
        let obj = {
          cloudTerrace: this.cctvForm.cloudTerrace,
          cnName: this.cctvForm.cnName,
          contact: this.cctvForm.contact,
          contactPhone: this.cctvForm.contactPhone,
          enName: this.cctvForm.enName,
          latitude: this.cctvForm.latitude,
          longitude: this.cctvForm.longitude,
          orgName: this.cctvForm.orgName,
          ownerUnitName: this.cctvForm.ownerUnitName,
          position: this.cctvForm.position,
          probeNum: this.cctvForm.probeNum,
          remark: this.cctvForm.remark,
          probeType: this.cctvForm.probeType
        }
        if (this.cctvtitle == '添加CCTV系统') {
          cctvSiteService.create(obj).then(res => {
            if (res) {
              this.getData(0)
              this.cctvdialog = false
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
            }
          })
        } else { // 编辑CCTV系统
          obj.id = this.detailId
          obj.createTime = this.createTime
          cctvSiteService.update(obj).then(res => {
            if (res) {
              this.getData(0)
              this.cctvdialog = false
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            }
          })
        }
      },
      vtssurebtn () {
        if (this.plantabs == '2') {
          let obj = {
            createFinishTime: this.vtsForm.createFinishTime,
            latitude: this.vtsForm.latitude == '0' ? '' : this.vtsForm.latitude,
            longitude: this.vtsForm.longitude == '0' ? '' : this.vtsForm.longitude,
            name: this.vtsForm.name,
            position: this.vtsForm.position,
          }
          if (this.vtstitle == '添加VTS分中心') {
            vtsSubCenterService.create(obj).then(res => {
              if (res) {
                this.getData(0)
                this.vtsdialog = false
                this.$message({
                  type: 'success',
                  message: '创建成功!'
                })
              }
            })
          } else { // 编辑CCTV系统
            obj.id = this.detailId
            obj.createTime = this.createTime
            vtsSubCenterService.update(obj).then(res => {
              if (res) {
                this.getData(0)
                this.vtsdialog = false
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                })
              }
            })
          }
        } else if (this.plantabs == '3') {
          let obj = {
            altitude: this.vtsForm.altitude,
            createFinishTime: this.vtsForm.createFinishTime,
            latitude: this.vtsForm.latitude,
            longitude: this.vtsForm.longitude,
            name: this.vtsForm.name,
            position: this.vtsForm.position,
          }
          if (this.vtstitle == '添加VTS雷达站') {
            vtsRadarStService.create(obj).then(res => {
              if (res) {
                this.getData(0)
                this.vtsdialog = false
                this.$message({
                  type: 'success',
                  message: '创建成功!'
                })
              }
            })
          } else { // 编辑CCTV系统
            obj.id = this.detailId
            obj.createTime = this.createTime
            vtsRadarStService.update(obj).then(res => {
              if (res) {
                this.getData(0)
                this.vtsdialog = false
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                })
              }
            })
          }
        }
      },
      getData (num) {
        if (this.plantabs == '1') {
          cctvSiteService.search(num).then(res => {

            this.total1 = res.dataCount
            this.tableData1 = res.data
          })
        } else if (this.plantabs == '2') {
          vtsSubCenterService.search(num).then(res => {
            this.total2 = res.length
            this.tableData2 = res
          })
        } else if (this.plantabs == '3') {
          vtsRadarStService.search(num).then(res => {
            this.total3 = res.length
            this.tableData3 = res
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .refine_lawequip {
    width: 100%;
    padding-bottom: 50px;

    .add-icon {
      font-size: 30px;
      cursor: pointer;
      margin-top: 10px;
    }
  }
</style>
